<template>
  <div class="myPannle">
    <div class="myScreenBody">
      <div class="module moduleOne" ref="moduleOne">
        <ModuleOne />
      </div>
      <div class="module moduleTwo" ref="moduleTwo">
        <ModuleTwo />
      </div>
      <div class="module moduleThree" ref="moduleThree">
        <ModuleThree />
      </div>
    </div>
  </div>
</template>

<script>
import ModuleOne from './ModuleOne/index.vue'
import ModuleTwo from './ModuleTwo/index.vue'
import ModuleThree from './ModuleThree/index.vue'
export default {
  components: {
    ModuleOne,
    ModuleTwo,
    ModuleThree
  },
  mounted() {}
}
</script>

<style lang="scss">
.myPannle {
  height: 100%;
  width: 100%;
  background: radial-gradient(50% 50% at 50% 50%, #373f4b 0%, #03060c 100%);
  mix-blend-mode: normal;
  color: #ffffff;
  padding-top: 80px;
  flex-shrink: 0;
  font-size: 14px;
  .logo {
    position: relative;
    margin-bottom: 30px;
    height: 50px;
    width: 100vw;
    background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/logo_1%402x.png')
      no-repeat 0 0 / auto 100%;
    .myButton {
      position: absolute;
      top: 10px;
      right: 24px;
    }
    .chexingbtn {
      width: 100px;
      height: 40px;
      background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E5%9B%AD%E5%8C%BA%E6%80%BB%E8%A7%88-%E9%BB%98%E8%AE%A4%402x.png')
        no-repeat 0 0 / contain;
    }
    .yuanqubtn {
      width: 100px;
      height: 40px;
      background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E8%BD%A6%E8%A1%8C%E7%AE%A1%E7%90%86-%E9%80%89%E4%B8%AD%402x.png')
        no-repeat 0 0 / contain;
    }
  }
  .myScreenBody {
    display: flex;
    width: 100%;
    height: calc(100% - 80px);
    .module {
      width: 640px;
    }
  }
}

// 各个小模块title
.title {
  height: 30px;
}

//数字展示框
.shouNumber {
  display: flex;
  align-items: center;
  height: 56px;
  line-height: 56px;
  background: linear-gradient(
    to right,
    rgba(103, 116, 160, 0),
    rgba(57, 71, 120, 0.38),
    rgba(103, 116, 160, 0)
  );
  .numberBox {
    flex: 1;
    text-align: center;
    font-family: 'Number';
  }

  .number {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
    width: 24px;
    height: 35px;
    line-height: 35px;
    background-color: transparent;
    text-align: center;
    border: 1px solid #3692ff;
    font-size: 18px;
    color: #f1f8ff;
    text-shadow: 0px 0px 2px 0px #48c8ff;
  }
  .numContainer {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .digital-transform {
    // display: flex;
    // justify-content: end;
    font-family: 'Number';
  }
  .dt-scroll {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
    width: 24px;
    height: 35px;
    line-height: 35px;
    background-color: transparent;
    text-align: center;
    border: 1px solid #3692ff;
    font-size: 18px;
    color: #f1f8ff;
    text-shadow: 0px 0px 2px 0px #48c8ff;
  }
}

// 每个小模块body
.moduleBody {
  padding: 20px;
}
</style>
